import React from "react";
import {
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  Checkbox,
  Box,
  Typography,
} from "@mui/material";
import MultiThreadProgress from "./MultiThreadProgress";

const DownloadTable = ({
  downloads,
  selectedItems,
  onSelectAll,
  onSelectItem,
  onRowClick,
  onContextMenu,
  getStatusText,
  formatSpeed,
  formatRemainingTime,
  downloadSpeeds,
}) => {
  return (
    <Box
      sx={{
        height: "calc(100vh - 96px)",
        display: "flex",
        flexDirection: "column",
      }}
    >
      <TableContainer
        component={Paper}
        sx={{
          flex: 1,
          overflow: "auto",
          "& .MuiTableContainer-root": {
            maxHeight: "100%",
          },
          "& .MuiTableRow-root": {
            height: "48px",
          },
          "& .MuiTableCell-root": {
            padding: "4px 4px",
            fontSize: "0.875rem",
          },
        }}
      >
        <Table stickyHeader>
          <TableHead>
            <TableRow>
              <TableCell
                sx={{
                  backgroundColor: "background.paper",
                  position: "sticky",
                  top: 0,
                  zIndex: 1,
                  minWidth: "300px",
                }}
              >
              <Box sx={{ display: "flex", flexDirection: "row" }}>
                  <Checkbox
                    checked={
                      selectedItems.size === downloads.length &&
                      downloads.length > 0
                    }
                    indeterminate={
                      selectedItems.size > 0 &&
                      selectedItems.size < downloads.length
                    }
                    onChange={onSelectAll}
                    sx={{ width: "18px", height: "18px", marginRight: "5px" }}
                  />
                  <Typography
                    variant="body2"
                    gutterBottom
                    sx={{ width: "50%" }}
                  >
                    文件名
                  </Typography>
                  <Typography
                    variant="body2"
                    gutterBottom
                    sx={{ width: "50%" }}
                  >
                    大小
                  </Typography>
                </Box>
              </TableCell>
              <TableCell
                align="center"
                sx={{
                  backgroundColor: "background.paper",
                  position: "sticky",
                  top: 0,
                  zIndex: 1,
                  width: "250px",
                }}
              >
                <Box sx={{ display: "flex", flexDirection: "row" }}>
                  <Typography
                    variant="body2"
                    gutterBottom
                    sx={{ width: "50%", textAlign: "left" }}
                  >
                    进度
                  </Typography>
                  <Typography
                    variant="body2"
                    gutterBottom
                    sx={{ width: "50%" }}
                  >
                    剩余时间
                  </Typography>
                </Box>
              </TableCell>
              <TableCell
                align="right"
                sx={{
                  backgroundColor: "background.paper",
                  position: "sticky",
                  top: 0,
                  zIndex: 1,
                  width: "100px",
                }}
              >
                <Typography variant="body2" gutterBottom sx={{ width: "100%", textAlign: "left" }}>
                  下载速度
                </Typography>
              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {downloads.map((download) => (
              <TableRow
                key={download.id}
                onContextMenu={(e) => onContextMenu(e, download.id)}
                selected={selectedItems.has(download.id)}
                onClick={() => onRowClick(download.id)}
                sx={{
                  cursor: "pointer",
                  "&:hover": {
                    backgroundColor: "action.hover",
                  },
                }}
              >
                <TableCell>
                  <Box sx={{ display: "flex", flexDirection: "row" }}>
                  <Checkbox
                    checked={selectedItems.has(download.id)}
                    onChange={(e) => {
                      e.stopPropagation();
                      onSelectItem(download.id);
                    }}
                    sx={{ width: "18px", height: "18px", marginRight: "5px" }}
                  />
                    <Typography noWrap>{download.file_name}</Typography>
                  </Box>
                    <Typography variant="caption" color="textSecondary">
                      {download.size}({downloads.length} 个文件)
                    </Typography>
                </TableCell>
                <TableCell>
                  <Box
                    sx={{ display: "flex", flexDirection: "column", gap: 1 }}
                  >
                    <MultiThreadProgress
                      progress={download.progress}
                      status={download.status}
                      threadProgress={download.thread_progress || []}
                      totalSize={download.total_bytes}
                    />
                    <Typography
                      variant="caption"
                      color="textSecondary"
                    >
                      {formatRemainingTime(
                        downloadSpeeds[download.id]?.remainingTime,
                        download.status
                      )}
                    </Typography>
                  </Box>
                </TableCell>
                <TableCell>
                <Typography noWrap>
                  {downloadSpeeds[download.id]?.speed
                    ? formatSpeed(downloadSpeeds[download.id].speed)
                    : "0 B/s"}
                </Typography>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </Box>
  );
};

export default DownloadTable;
